<template>
  <div class="home">
    <div class="title">element>>table测试</div>
    <z-table
      :loading="loading"
      :tableData="tableData"
      :column="column"
      :pagination="pagination"
      @handle-page-change="handlePageChange"
      @selection-change="handleSelectionChange"
      @sort-change="sortChange"
    >
      <!-- <template slot="date" scope="{row}"> -->
      <template v-slot:add="{ row }">
        <el-tag type="success" v-if="row.add == 1"> {{ row.add }}</el-tag>
        <el-tag type="info" v-else> {{ row.add }}</el-tag>
      </template>

      <template v-slot:operate="{ row, index }">
        <el-button type="primary" @click="add(row, index)">添加</el-button>
        <el-button type="danger" @click="del(row)">删除</el-button>
      </template>
    </z-table>
  </div>
</template>

<script>
import ZTable from "@/components/table/index.vue";
import { column, tableDataList } from "./index";
export default {
  name: "Home",
  components: {
    ZTable
  },
  data() {
    return {
      column,
      // tableData: [],
      loading: true,
      pagination: {
        pageIndex: 1,
        pageSize: 10,
        total: 0
      }
    };
  },
  computed: {
    tableData() {
      if (tableDataList.length == 0) {
        return [];
      }
      // 每页的起始位置
      let startIndex =
        (this.pagination.pageIndex - 1) * this.pagination.pageSize;
      // 结束位置
      let endIndex = startIndex + this.pagination.pageSize;
      return tableDataList.slice(startIndex, endIndex);
    }
  },
  mounted() {
    setTimeout(() => {
      this.pagination.total = tableDataList.length;
      this.loading = false;
    }, 1000);
  },
  methods: {
    add(row, index) {
      console.log("添加", row, index);
    },
    del(row) {
      console.log("删除", row);
    },
    //复选框选择
    handleSelectionChange(val) {
      console.log(val);
    },

    sortChange(column) {
      console.log(column);
    },
    handlePageChange(pagination) {
      this.pagination = pagination;
    }
  }
};
</script>
<style lang="less" scoped>
.home {
  .title {
    text-align: center;
    font-size: 18px;
  }
}
</style>
